<template>
    <view class='drinkingWaterList'>
        <view class="themoon-contenList" v-for="(item, key) in objData" :key="index">
            <view class="themoon">
                {{ key * 1 }}月
            </view>
            <view class="contenList">
                <view class="conten-moonList" v-for="(item, key) in item" :key="index">
                    <view class="moon">
                        {{ key }}日
                    </view>
                    <view class="moonList">
                        <view class="text-number-time" v-for="(item, index) in 3" :key="index">
                            <view class="text">
                                取水量
                            </view>
                            <view class="number">
                                300ml
                            </view>
                            <view class="time">
                                13:01:01
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: 'drinkingWaterList',
    data() {
        return {};
    },
    props: {
        objData: {
            type: Object,
            default: () => ({})
        }
    },
    beforeCreate() { },
    created() { },
    beforeMount() { },
    mounted() { },
    beforeUpdate: {},
    onReachBottom: {},
};
</script>
<style lang="scss">
.drinkingWaterList {
    .themoon-contenList:first-child>.contenList {
        margin-top: 0;

    }

    .themoon-contenList:first-child>.themoon {
        margin-top: 0;
    }

    .themoon-contenList:last-child>.contenList>.conten-moonList:last-child>.moonList::before {
        content: "";
        width: 4rpx;
        height: calc(100% + 24rpx);
        background: #2590FA;
        position: absolute;
        left: -34rpx;
        top: -18rpx;
    }

    .themoon-contenList {
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;

        .themoon {
            font-weight: 600;
            font-size: 44rpx;
            color: #14171A;
            flex: 1;
            margin-top: 55rpx;
        }



        .contenList {
            margin-top: 64rpx;

            .themoon {
                font-weight: 600;
                font-size: 44rpx;
                color: #14171A;
            }

            .conten-moonList:first-child {
                margin-top: 0;
            }

            .conten-moonList {
                margin-left: 72rpx;
                margin-top: 64rpx;

                .moon {
                    font-size: 28rpx;
                    color: #2E3033;
                }

                .moonList {
                    width: 546rpx;
                    background: #FFFFFF;
                    box-shadow: 0rpx 8rpx 20rpx 0rpx #F0F1F2;
                    border-radius: 16rpx;
                    margin-top: 16rpx;
                    font-size: 28rpx;
                    padding: 32rpx;
                    box-sizing: border-box;
                    position: relative;

                    .text-number-time:first-child {
                        margin-top: 0;
                    }

                    .text-number-time {
                        display: flex;
                        align-items: center;
                        height: 64rpx;
                        border-bottom: 2rpx solid #F3F4F4;
                        margin-top: 24rpx;

                        .text {
                            color: #616366;
                        }

                        .number {
                            color: #14171A;
                            margin-left: 24rpx;
                        }

                        .time {
                            color: #B1B2B2;
                            margin-left: auto;
                        }
                    }
                }

                .moonList::after {
                    content: "";
                    width: 32rpx;
                    height: 32rpx;
                    background: #2590FA;
                    border-radius: 50%;
                    position: absolute;
                    left: -48rpx;
                    top: -50rpx;
                }

                .moonList::before {
                    content: "";
                    width: 4rpx;
                    height: calc(100% + 86rpx);
                    background: #2590FA;
                    position: absolute;
                    left: -34rpx;
                    top: -18rpx;
                }

            }
        }
    }

}
</style>